<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:padding-left="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Dynamic Table</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>
    <div th:replace="common :: commonheader"/>

    <script>

        function update(obj,id,pn) {
            // var id = document.getElementsByTagName("tbody")[0].rows[0].cells[0].innerText
            // var id = document.getElementById("uid").innerHTML
            // var id = $("#gid").val()

            // var td = $(obj).parents("tr").children("td");
            // var content = td.eq(0).text();
            // var content2 = td.eq(1).text();
            alert(pn)
            alert(obj)
            alert(id)
           $.ajax({
              url:"/user/query",
              data:{
                "id":id
              },
              type:"get",
              success:function (data) {
                  // alert(data)
                  document.formDetilu.id.value=data.id
                  document.formDetilu.name.value=data.name
                  document.formDetilu.age.value=data.age
                  document.formDetilu.email.value=data.email
                  document.formDetilu.pn.value=pn
              },
              dataType:"json"
           });

            document.getElementById("dialogu").style.display='block'

        }

        add = function () {
            document.getElementById("dialog").style.display='block'

        }

        save_a = function () {
            document.getElementById("formDetil").submit()
            document.getElementById("dialogu").style.display='none'
        }

        save_u = function () {
            document.getElementById("formDetilu").submit()
            document.getElementById("dialogu").style.display='none'
        }

        cancel = function () {
            document.getElementById("dialog").style.display='none'
            document.getElementById("dialogu").style.display='none'
        }
    </script>

    <style>
        #dialog{
            width: 400px;
            height: 300px;
            border: solid 1px #b5b0b0;
            border-radius: 5px;
            position: absolute;
            margin-top: 200px;
            left: 30%;
            bottom: 30%;
            background: #eee;
            line-height: 40px;
            text-align: center;
            display: none;
            font-size:16px;
        }
        #dialogu{
            width: 400px;
            height: 300px;
            border: solid 1px #b5b0b0;
            border-radius: 5px;
            position: absolute;
            margin-top: 200px;
            left: 30%;
            bottom: 30%;
            background: #eee;
            line-height: 40px;
            text-align: center;
            display: none;
            font-size:16px;
        }
    </style>
</head>

<body class="sticky-header">



<section>

    <div th:replace="common::#leftmenu"></div>
    <!-- main content start-->
    <div class="main-content">


        <div th:replace="common::#headermenu"></div>

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Dynamic Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Tables</a>
                </li>
                <li class="active"> Dynamic Table</li>
            </ul>
        </div>
        <!-- page heading end-->


        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Dynamic Table
                            <button class="btn btn-success" onclick="add()" >添加</button>
                            <input type="hidden" id="test" th:value="${page.total}"/>
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-chevron-down"></a>
                <a href="javascript:;" class="fa fa-times"></a>
             </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table" name="pro">
                                <table class="display table table-bordered table-striped" id="dynamic-table">
                                    <thead>
                                    <tr>
                                        <th>序号ID</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th class="hidden-phone">邮箱地址</th>
                                        <th class="hidden-phone">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="gradeX" th:each="user : ${page.records}">

                                        <!--<input type="hidden" id="gid" th:value="${user.id}"/>-->
                                        <td id="uid" th:text="${user.id}" th:value="${user.id}"></td>
                                        <td th:text="${user.name}"></td>
                                        <td th:text="${user.age}"></td>
                                        <td th:text="${user.email}"></td>
                                        <td>
                                            <a class="btn btn-danger" th:href="@{/user/delete/{id}(id=${user.id},pn=${page.current})}">删除</a>
                                            <button class="btn btn-warning" th:id="${user.id}" th:name="${page.current}" onclick="update(this,this.id,this.name)" >更新</button>
                                        </td>

                                    </tr>

                                    </tbody>
                                </table>

                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="dataTables_info" id="dynamic-table_info">当前第 [[${page.current}]]页
                                                                    共 [[${page.Pages}]]  共有 [[${page.total}]] 记录
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="dataTables_paginate paging_bootstrap pagination">
                                            <ul>
                                                <li class="prev disabled"><a href="#">上一页</a></li>
                                                <li th:class="${num == page.current?'active':''}"
                                                    th:each="num : ${#numbers.sequence(1,page.pages)}">
                                                    <a th:href="@{/dynamic_table(pn=${num})}">
                                                        [[${num}]]
                                                    </a>
                                                </li>
                                                <li class="next disabled"><a href="#">下一页</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div id="dialog" hidden>
                                <form id="formDetil" name="formDetil" class="easyui-form"   method="get" action="/user/add">
                                    <input type="hidden" name="total" th:value="${page.total}">
                                    <h3>输入信息</h3>
                                    <div  class="table-responsive" padding-left: 20%>
                                        <tr>
                                            <td style="border: none; padding-left: 0;">
                                                姓名:
                                                <input type="text" name="name"  required="true"  >
                                            </td><br />
                                            <td style="border: none;padding-left: 20px;">
                                                年龄:
                                                <input type="text" name="age"  required="true" >
                                            </td><br />
                                            <td style="border: none; padding-left: 10px;">
                                                邮箱:
                                                <input type="text" name="email" >
                                            </td><br />
                                        </tr>
                                        <div>
                                            <input type="button" value="确定" onclick="save_a()"></input>
                                            <input type="button" value="取消" onclick="cancel()"></input>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div id="dialogu" hidden>
                                <form id="formDetilu" name="formDetilu" class="easyui-form"   method="get" action="/user/update">
                                    <input type="text" name="pn">
                                    <input type="text" name="id">
                                    <h3>输入信息</h3>
                                    <div  class="table-responsive" padding-left: 20%>
                                        <tr>
                                            <td style="border: none; padding-left: 0;">
                                                姓名:
                                                <input type="text" name="name"  required="true"  >
                                            </td><br />
                                            <td style="border: none;padding-left: 20px;">
                                                年龄:
                                                <input type="text" name="age"  required="true" >
                                            </td><br />
                                            <td style="border: none; padding-left: 10px;">
                                                邮箱:
                                                <input id="beginDate" type="text" name="email" >
                                            </td><br />
                                        </tr>
                                        <div>
                                            <input type="button" value="确定" onclick="save_u()"></input>
                                            <input type="button" value="取消" onclick="cancel()"></input>
                                        </div>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </section>
                </div>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2014 &copy; AdminEx by ThemeBucket
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->





</section>

<!--&lt;!&ndash; Placed js at the end of the document so the pages load faster &ndash;&gt;-->
<!--<script src="js/jquery-1.10.2.min.js"></script>-->
<!--<script src="js/jquery-ui-1.9.2.custom.min.js"></script>-->
<!--<script src="js/jquery-migrate-1.2.1.min.js"></script>-->
<!--<script src="js/bootstrap.min.js"></script>-->
<!--<script src="js/modernizr.min.js"></script>-->
<!--<script src="js/jquery.nicescroll.js"></script>-->
<div th:replace="common::commomscript"></div>
<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<!--<script src="js/dynamic_table_init.js"></script>-->


</body>
</html>
